﻿<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../js/knockout-2.1.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>

    <h1>Sign in to the community day 2012!</h1>
    <p>If you want a password, choose something  that will be easy  for you to remember but hard for others to guess. </p>
    <div>
        <p>
            <label>
                User name
            </label>
            <input class="first" data-bind="value: userName" />
        </p>
        <p>
            <label>
                Password
            </label>
            <input type="password" data-bind="value: password" />
        </p>
        <p>
            <label>
                retype password
            </label>
            <input type="password" data-bind="value: passwordCheck" />
        </p>
        <p>
            <label>
                Password hint
            </label>
            <input data-bind="value: passwordHint" />
        </p>
        <div data-bind="visible: !passwordMessage()" class="error">The passwords you provided do not match!</div>
        <div class="buttonholder" data-bind="visible: passwordMessage()">
            <button type="button">
                <img src="../images/metro.icons/white/save.png" />
            </button>
            <img src="../images/metro.icons/white/heart.png" onclick="document.location.href='/'" />
        </div>
    </div>




    <script type="text/javascript">

        $(document).ready(function () {
            var ViewModel = function (userName, password, passwordCheck, passwordHint) {
                this.userName = ko.observable(userName);
                this.passwordValue = ko.observable(password);
                this.passwordCheckValue = ko.observable(passwordCheck);
                this.passwordMessage = ko.observable(true);
                this.passwordHint = ko.observable(passwordHint);

                this.password = ko.computed({
                    read: this.passwordValue,
                    write: function (value) {
                        this.passwordValue(value);
                        this.passwordMessage(validatePassWord(this.passwordValue(), this.passwordCheckValue()));
                    },
                    owner: this
                });

                this.passwordCheck = ko.computed({
                    read: this.passwordCheckValue,
                    write: function (value) {
                        this.passwordCheckValue(value);
                        this.passwordMessage(validatePassWord(this.passwordValue(), this.passwordCheckValue()));
                    },
                    owner: this
                });
            };

            ko.applyBindings(new ViewModel("Tom Van Gaever", "", "", ""));

            function validatePassWord(pass, check) {
                if (pass == "" || check == "") {
                    return true;
                }

                if (pass == check)
                    return true;
                else {
                    return false;
                }
            }

            $(".first").focus();

        });

    </script>

</body>
</html>
